<template>
  <div class="login">
    <!-- <div class="title">基于python的新冠疫情数据统计分析系统</div> -->
    <div class="content">
      <!-- <div class="title">社交网络大数据分析与可视化展示</div> -->
      <div class="input_item">
        <label>账号:</label><input v-model="username" type="text" />
      </div>
      <div class="input_item">
        <label>密码:</label><input v-model="password" type="password" />
      </div>
      <!-- <div class="input_item">
        <label class="mobile_label">手机号:</label><input v-model="mobile" type="text" />
      </div> -->
      <div class="btn_block">
        <button class="login_btn btn" @click="goLogin">登录</button>
        &nbsp;
        <button @click="goRegister" class="reg_btn btn">注册</button>
      </div>
    </div>
  </div>
</template>
<script>
import { login, regiUser } from "@/api/page2Api";
export default {
  name: "page1",
  components: {},
  data() {
    return {
      username: "",
      password: "",
      mobile: "",
      type: "",
    };
  },
  methods: {
    goLogin() {
      let obj = { name: this.username, pwd: this.password };
      this.type = 1;
      // return
      login(obj).then((res) => {
        console.log(res, "====");
        if (res.status == "ok") {
          this.$router.push("/page1");
        } else {
          this.$message.error('登录失败');
        }
      });
    },
    goRegister() {
      this.type = 2;
      regiUser({ name: this.username, pwd: this.password }).then((res) => {
        console.log(res);
        if (res.status == "ok") {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          console.log("注册成功");
        } else {
          this.$message.error('注册失败');
          // ElMessage.error(res.data.msg);
        }
      });
    },
  },
};
</script>

<style scoped lang='less'>
.login {
  width: 100%;
  height: 100%;
  background-image: url("./background.jpg");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    .input_item {
      height: 60px;
      label {
        padding-right: 10px;
        font-size: 18px;
      }
      .mobile_label {
        padding-right: 10px;
      }
      input {
        height: 30px;
        width: 250px;
        outline: none;
        border: none;
        float: right;
      }
    }
    .btn_block {
      .btn {
        height: 35px;
        width: 151px;
        background: #02a1c1;
        color: #fff;
        border: none;
        cursor: pointer;
      }
      .login_btn {
      }
      .reg_btn {
      }
    }
  }
}
.title {
  line-height: 60px;
}
</style>